import { Suspense } from 'react'
import { ToolGrid } from '@/components/tools/tool-grid'
import { ToolGridSkeleton } from '@/components/tools/tool-card-skeleton'
import { SearchSection } from '@/components/search/search-section'

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <section className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
          <div className="text-center">
            <h1 className="text-3xl font-bold text-gray-900 sm:text-4xl md:text-5xl lg:text-6xl">
              发现优秀的
              <span className="text-blue-600"> Web工具</span>
            </h1>
            <p className="mt-3 max-w-md mx-auto text-sm text-gray-500 sm:text-base md:text-lg lg:text-xl md:mt-5 md:max-w-3xl">
              汇聚最实用的在线工具和游戏，提升您的工作效率和娱乐体验
            </p>
          </div>
        </div>
      </section>

      {/* Search and Filter Section */}
      <section className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
          <SearchSection />
        </div>
      </section>

      {/* Tools Grid Section */}
      <section className="py-6 sm:py-8 lg:py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <Suspense fallback={<ToolGridSkeleton count={9} />}>
            <ToolGrid />
          </Suspense>
        </div>
      </section>
    </div>
  )
}
